<template>
	<view>
		<view class="seach">
			<!-- 搜索 -->
			<view class="bg-white d-flex j-center a-center py-2 z-222 position-relative">
				<view class="bg-light-secondary span-18 rounded-50 d-flex py-1 ">
					<u-icon name="search" color="#888888" size="33" class="mx-2"></u-icon>
					<input type="text" class="w-100" :focus="true" confirm-type="search" @confirm="seach" placeholder="搜索商品名称" v-model="keywords" @input="seachInput" />
				</view>
			</view>
			
				<view class="position-relative z-222" v-if="!edit">
					<view class="d-flex bg-white mav_bar pt-1 px-2 j-evenly">
						<view :class="item.id==nav_id?'mavbar_h':''" class="d-flex position-relative"  v-for="(item,index) in mavbar_list" :key="index" @click="nav_tab(item)">
							<view class="cro_left"></view>
							<view class="" >
								<view class="mavbar d-flex a-center j-center bg-light-secondary">
									<text class="font-27" :class="item.id==nav_id?'font-weight':''">{{item.name}}</text>
									<image v-if="item.id==nav_id" :src="item.up_img" mode="" class="up_down"></image>
									<image v-else :src="item.down_img" mode="" class="up_down"></image>
								</view>
							</view>
							<view class="cro_right"></view>
						</view>
					</view>	
					<!-- 销量 -->
					<view class="z-222 w-100 position-absolute bg-light-secondary py-2 px-4 rounded-bottom" v-show="nav_id==1">
						<view class="py-2">
							<view class="py-2 d-flex a-center" v-for="(item,index) in volume_list" :key="index" @click="volume(item)">
								<view class="" :class="item.id==volume_id?'active':''">{{item.name}}</view>
								<view class="ml-1" v-show="item.id==volume_id"><image src="../../static/yixuan-selectAddress/gou.png" mode="" class="yixuan"></image></view>
							</view>
						</view>
						<view class="d-flex sub j-sb">
							<button type="default" class="replacement" @click="sun_replacement">重置</button>
							<button type="warn" class="confirm" @click="sub_confirm">确定</button>
						</view>
					</view>
					<!-- 活动推荐 -->
					<view class="z-222 w-100 position-absolute bg-light-secondary rounded-bottom py-2 px-4" v-show="nav_id==2">
						<view class="py-2 d-flex flex-wrap">
							<view class="py-2 w-50" v-for="(item,index) in recommend_list" :key="index" @click="recommend(item)">
								<view class="" :class="item.id==suggest_id?'active':''">{{item.name}}</view>
							</view>
						</view>
						<view class="d-flex sub j-sb">
							<button type="default" class="replacement" @click="sun_replacement">重置</button>
							<button type="warn" class="confirm" @click="sub_confirm">确定</button>
						</view>
					</view>
					<!-- 商品分类 -->
					<view class="z-222 w-100 position-absolute bg-light-secondary pl-4 rounded-bottom" v-show="nav_id==3">
						<view class="w-100">
								<view class="d-flex">
									<view class="span-4">
										<scroll-view scroll-y="true">
											<view class="py-2 h-50">
												<view class="py-2" v-for="(item,index) in once_class_list" :key="index" @click="once_class(item)">
													<view class="ellipsis_pro" :class="item.cat_id==once_class_id?'active':''">{{item.cat_name}}</view>
												</view>
											</view>
										</scroll-view>
									</view>
									<view class="span-16 d-flex bg-white rounded-left mt-2">
										<scroll-view scroll-y="true">
											<view class="h-50">
												<view class="py-2 ml-5" v-if="once_class_id==item.parent_id" v-for="(item,index) in twin_class_list" :key="index" @click="twin_class(item)">
													<view class="ellipsis_pro" :class="item.cat_id==twin_class_id?'active':''">{{item.cat_name}}</view>
												</view>
											</view>
										</scroll-view>
										<scroll-view scroll-y="true">
											<view class="h-50">
												<view class="py-2 ml-2" v-if="twin_class_id==item.parent_id" v-for="(item,index) in three_class_list" :key="index" @click="three_class(item)">
													<view class="ellipsis_pro" :class="item.cat_id==three_class_id?'active':''">{{item.cat_name}}</view>
												</view>
											</view>
										</scroll-view>
									</view>
								</view>
						</view>
						<view class="d-flex sub j-sb py-2">
							<button type="default" class="replacement" @click="sun_replacement">重置</button>
							<button type="warn" class="confirm" @click="sub_confirm">确定</button>
						</view>
					</view>
					<!-- 商品品牌 -->
					<view class="z-222 w-100 rounded-bottom position-absolute bg-light-secondary py-2 px-4" v-show="nav_id==4">
						<scroll-view scroll-y="true">
							<view class="py-2 h-50 d-flex flex-wrap">
								<view class="py-2 w-50" v-for="(item,index) in brand_list" :key="index" @click="brand(item)">
									<view class="" :class="item.brand_id==brand_id?'active':''">{{item.brand_name}}</view>
								</view>
							</view>
						</scroll-view>
						<view class="d-flex sub j-sb">
							<button type="default" class="replacement" @click="sun_replacement">重置</button>
							<button type="warn" class="confirm" @click="sub_confirm">确定</button>
						</view>
					</view>
				</view>
			
		</view>
		<view class="" v-if="edit">
			<scroll-view scroll-y="true" :style="{height: scrollHeight}">
				<view class="d-flex flex-column j-center a-center h_100" v-if="!seach_list.length">
					<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
					<view class="">暂无任何商品</view>
				</view>	
				<view class="h_100" v-else>
					<view class="m-2 p-3 rounded-20 bg-white d-flex" v-for="(item,index) in seach_list" :key="index" @click="pro_detail(item)">
						<view class="promotion">
							<image :src="item.img.url" mode="widthFix" class="promotion_img rounded-20"></image>
						</view>
						<view class="ml-3 mr-1">
							<view class="font-weight-500 ellipsis  pro_name">{{item.goods_name}}</view>
							<view class="my pt-2 white-space  font-md"><text class="text-muted">促销时间:</text><text class="ml font-weight-500" >{{item.formatted_promote_start_date.substr(0,10).replace(/-/g,'.')}}-{{item.formatted_promote_end_date.substr(0,10).replace(/-/g,'.')}}</text></view>
							<view class=" mt-1 pt font-md"><text class="text-muted">促销价格:</text><text class="font-35 text-danger ml-1 font-weight-500">{{item.formatted_promote_price}}</text></view>
						</view>	
					</view>	
				</view>
			</scroll-view>
		</view> 
		<!-- 进行中 -->
		<view class="" v-else>
			
			<scroll-view scroll-y="true" :style="{height: scrollHeight}" @scrolltolower="scrolltolower">
				<view class="mt-5" v-if="u_loadmore">
					<u-loadmore status="loading" icon-type="circle" />
				</view>
				<view v-else>
					<view class="d-flex flex-column j-center a-center h_100" v-if="!saleList.length">
						<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
						<view class="">暂无任何商品</view>
					</view>	
					<view class="" v-else>
						
						<view  class="goods_card bg-white m-2 p-3 rounded-20" v-for="(item,index) in saleList" :key="index" v-if="!item.is_promote" >
							<view class="goods_card_head d-flex"  @click="pro_add(item)">
								<view class="goods_card_head_left position-relative ">
									<view v-if="item.has_product=='yes'" class="text-white goods_logo position-absolute">多货品</view>
									<image class="" :src="item.img.url?item.img.url:defaltImage" mode=""></image>
								</view>
								<view class="goods_card_head_right pl-3">
									<view class="d-flex">
										<view class="ellipsis pro_name">
											<image v-if="item.is_hot" src="../../static/images/goods/icon_goods_hot.png" class="mr" mode=""></image>
											<image v-if="item.is_new" src="../../static/images/goods/icon_goods_new.png" class="mr" mode=""></image>
											<image v-if="item.is_best" src="../../static/images/goods/icon_goods_best.png" class="mr" mode=""></image>
											<image v-if="item.is_promote" src="../../static/images/goods/promotion.png" class="mr" mode=""></image>
											{{item.name}}
										</view>
									</view>
									<view class="text-light-muted font-md my pt-2">
										<text class="mr-3">库存：{{item.stock}}</text>
										<text>销量：{{item.sales_volume}}</text>
									</view>
									<view class="mt-1 pt">
										<text class="text-danger mr-2 font-35">{{item.shop_price}}</text><text class="font-md text-light-muted tex line-through">{{item.market_price}}</text>
									</view>
								</view>
							</view>
						</view>	
					</view>
					</view>
				</scroll-view>
			</view>
		<u-toast ref="uToast" />
		<!-- 遮罩层 -->
		<u-mask :show="mask_show" @click="mask"></u-mask>
	</view>
</template>

<script>
	const SIZE = 10
	export default {
		data() {
			return {
				mavbar_list:[
					{id:1,name:"销量",up_img:"../../static/images/promotion/superior.png.png",down_img:"../../static/images/promotion/underneath.png.png",mavbar_show:false},
					{id:2,name:"活动推荐",up_img:"../../static/images/promotion/superior.png.png",down_img:"../../static/images/promotion/underneath.png.png",mavbar_show:false},
					{id:3,name:"商品分类",up_img:"../../static/images/promotion/superior.png.png",down_img:"../../static/images/promotion/underneath.png.png",mavbar_show:false},
					{id:4,name:"商品品牌",up_img:"../../static/images/promotion/superior.png.png",down_img:"../../static/images/promotion/underneath.png.png",mavbar_show:false},
				],
				volume_list:[
					{id:1,name:"按销量由高到低",volume_show:false},
					{id:2,name:"按销量由低到高",volume_show:false},
				],
				recommend_list:[
					{id:1,name:"全部"},
					{id:2,name:"推荐精品"},
					{id:3,name:"推荐新品"},
					{id:4,name:"推荐热销"}
				],
				brand_list:"", // 品牌列表
				nav_id:"", // 导航id
				volume_id:"", // 销量iD
				suggest_id:"", // 销量iD
				brand_id:"", // 品牌ID
				suggest:"", // 推荐状态
				class_list:"", // 平台分类
				once_class_list:"",
				twin_class_list:'',
				three_class_list:'',
				once_class_id:1,
				twin_class_id:15,
				three_class_id:26,
				class_item:"",
				
				defaltImage:'../../static/images/goods/icon_default_image.png',
				seach_list:"", // 搜索列表
				saleList:"", // 在售商品列表
				keywords:"", // 关键字
				add:"", // 添加
				edit:"", // 详情
				mask_show:false,
				userinfo:"", // 用户信息
				scrollHeight:0, // 高度
				more:1, // 第几页
				count:10, // 条数
				
				u_loadmore:true, // 加载中
			}
		},
		methods: {
			// 导航栏切换
			nav_tab(item){
				this.nav_id=item.id
				this.mask_show=true
			},
			// 销量
			volume(item){
				this.volume_id=item.id
				if(item.id==1){
					this.sort_by=""
				}else{
					this.sort_by=""
				}
			},
			// 活动推荐
			recommend(item){
				this.suggest_id=item.id
				if(this.userinfo.is_merchant){
					if(item.name=='全部'){
						return
					}else if(item.name=="推荐精品"){
						this.suggest="store_best"
					}else if(item.name=="推荐新品"){
						this.suggest="store_new"
					}else if(item.name=="推荐热销"){
						this.suggest="store_hot"
					}
				}else{
					if(item.name=='全部'){
						return
					}else if(item.name=="推荐精品"){
						this.suggest="is_best"
					}else if(item.name=="推荐新品"){
						this.suggest="is_new"
					}else if(item.name=="推荐热销"){
						this.suggest="is_hot"
					}
				}
			},
			// 商品品牌
			brand(item){
				console.log(item)
				this.brand_id=item.brand_id
			},
			// 一级分类
			once_class(item){
				this.class_item=item
				this.once_class_id=item.cat_id
				this.twin_class_list=this.class_list.filter(v=>{
					if(item.cat_id==v.parent_id){
						return v
					}
				})
				
				let obj=[]
				this.class_list.filter(v=>{
					this.twin_class_list.filter(i=>{
						if(i.cat_id==v.parent_id){
							obj.push(v)
						}
					})
				})
				this.three_class_list=obj
			},
			// 二级分类
			twin_class(item){
				this.class_item=item
				this.twin_class_id=item.cat_id
				this.three_class_list=this.class_list.filter(v=>{
					if(item.cat_id==v.parent_id){
						return v
					}
				})
			},
			
			// 三级分类
			three_class(item){
				this.three_class_id=item.cat_id
				this.class_item=item
			},
			// 重置
			sun_replacement(){
				if(this.nav_id==1){
					this.volume_id=""
				}else if(this.nav_id==2){
					this.suggest_id=""
				}else if(this.nav_id==3){
					this.once_class_id=""
					this.twin_class_id=""
					this.three_class_id=""
				}else if(this.nav_id==4){
					this.brand_id=""
				}
			},
			// 确定
			sub_confirm(){
				if(this.nav_id==1){
					this.nav_id=""
					this.mask_show=false
					uni.showLoading({
						title:"加载中",
						success:()=>{
							this.$H.post("admin/merchant/goods/list",{
								list_type:"selling",
							}).then(res=>{
								this.saleList=res.data
								uni.hideLoading()
							})
						}
					})
					
				}else if(this.nav_id==2){
					this.nav_id=""
					this.mask_show=false
					uni.showLoading({
						title:"加载中",
						success:()=>{
							this.$H.post("admin/merchant/goods/search",{
								suggest:this.suggest
							}).then(res=>{
								this.saleList=res.data
								uni.hideLoading()
							})
						}
					})
				}else if(this.nav_id==3){
					this.nav_id=""
					this.mask_show=false
					this.$H.post("admin/merchant/goods/search",{
						category_id:this.class_item.cat_id
					}).then(res=>{
						this.saleList=res.data
						uni.hideLoading()
					})
				}else if(this.nav_id==4){
					this.nav_id=""
					this.mask_show=false
					uni.showLoading({
						title:"加载中",
						success: () => {
							setTimeout(()=>{
								this.$H.post("admin/merchant/goods/search",{
									brand_id:this.brand_id
								}).then(res=>{
									this.saleList=res.data
									console.log(res)
									uni.hideLoading()
								})
							},2000)
						}
					})
				}
			},
			// 遮罩层
			mask(){
				this.mask_show=false,
				this.nav_id=""
			}, 
			// 搜索
			seachInput(e){
				this.keywords=e.detail.value
			},
			// 搜索确认
			seach(){
				if(this.add){
					this.$H.post("admin/merchant/goods/list",{
						on_sale:'true',
						keywords:this.keywords,
					}).then(res=>{
						this.saleList=res.data
						console.log(res)
					})
				}else{
					this.$H.post("admin/promotion/list",{
						keywords:this.keywords,
					}).then(res=>{
						console.log(res)
						this.seach_list=res.data
					})
				}
			},
			// 详情
			pro_add(item){
					if(item.is_promote){
						this.$refs.uToast.show({
							title: '该商品已经是促销商品了',
							type: 'default',
						})	
					}else{
						uni.navigateTo({
							url:'/pagesA/promotion/promotion-add?goods_id='+item.goods_id
						})
						var globalData = getApp().globalData.pro_detail;
						getApp().globalData.pro_detail= item;
					}
			},
			pro_detail(item){
				uni.redirectTo({
					url:'/pagesA/promotion/promotion-edit?goods_id='+item.goods_id
				})
			},
			getData(){
				this.$H.post("admin/merchant/goods/list",{
					pagination:{
						count:this.count,
						page:this.more
					}
				}).then(res=>{
						this.saleList=res.data
						console.log(res)
				})
			},
			// 上拉加载函数
			scrolltolower(e){
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				setTimeout(()=>{
				    that.getData()
				},1000)
			},
		},
		onPageScroll(Object) {
			console.log(Object.scrollTop);//实时获取到滚动的值
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.seach').boundingClientRect()
					console.log(resu)
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom+'px';
						console.log(resu.windowHeight,res)
					})
				}
			})
		},
		onLoad(e) {
			this.add=e.add
			this.edit=e.edit
			if(e.add){
				this.$H.post("admin/merchant/goods/list",{
					list_type:"selling",
					pagination:{
						count:this.count,
						page:this.more
					}
					}).then(res=>{
					this.u_loadmore=false 
					this.saleList=res.data
				})		
			}
			
			this.$H.post("admin/merchant/goods/brand",{
				pagination:{
					count:200,
					page:1
				},
			}).then(res=>{
				this.brand_list=res.data
				
			})
			
			this.$H.post("admin/user/userinfo").then(res=>{
				this.userinfo=res.data
				console.log(res)
				if(this.userinfo.is_merchant){
					this.$H.post("admin/merchant/goods/category").then(res=>{
						this.class_list=res.data
						this.once_class_list=this.class_list.filter(v=>{
							if(v.parent_id==0){
								return v
							}
						})
						let obj=[]
						this.class_list.filter(v=>{
							this.once_class_list.filter(i=>{
								if(i.cat_id==v.parent_id){
									obj.push(v)
								}
							})
						})
						this.twin_class_list=obj
						let arr=[]
						this.class_list.filter(v=>{
							this.twin_class_list.filter(i=>{
								if(i.cat_id==v.parent_id){
									arr.push(v)
								}
							})
						})
						this.three_class_list=arr
					})
				}else{
					this.$H.post("admin/merchant/goods/merchant/category").then(res=>{
						this.class_list=res.data
						// 一级
						this.once_class_list=this.class_list.filter(v=>{
							if(v.parent_id==0){
								return v
							}
						})
						let obj=[]
						this.class_list.filter(v=>{
							this.once_class_list.filter(i=>{
								if(i.cat_id==v.parent_id){
									obj.push(v)
								}
							})
						})
						this.twin_class_list=obj
						let arr=[]
						this.class_list.filter(v=>{
							this.twin_class_list.filter(i=>{
								if(i.cat_id==v.parent_id){
									arr.push(v)
								}
							})
						})
						this.three_class_list=arr
					})
				}
			})
		}
		
	}
</script>

<style>
	.goods_icon{
		width: 30upx;
		height: 30upx;
	}
	.goods_img{
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
	}
	.goods_card_head_left{
		width: 200upx;
		height: 200upx;
	}
	.goods_card_head_left image{
		width: 200upx;
		height: 200upx;
		border-radius: 20upx;
	}
	.goods_card_head_right image{
		width: 30upx;
		height: 30upx;
	}
	.up_down{
		width: 20upx;
		height: 20upx;
	}
	.mavbar{
		width: 160upx;
		height: 60upx;
		border-radius: 30upx;
		text-align: center;
	}
	.mavbar_h{
		border-radius: 50upx 50upx 0 0;
		background-color: #f1f1f1;
	}
	.mav_bar{
		height: 88upx;
	}
	.sub{
		z-index: 111;
	}
	.sub /deep/ .replacement{
		border: 1px solid #CCCCCC;
		background-color: #FFFFFF;
		border-radius: 50upx;
		width: 45%;
		height: 80upx;
		line-height: 80upx;
	}
	.sub /deep/ .replacement::after{
		border: none;
	}
	.sub /deep/ .confirm{
		width: 45%;
		height: 80upx;
		line-height: 80upx;
		border-radius: 50upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	.active{
		color: #ff0000;
	}
	.yixuan{
		width: 30upx;
		height: 30upx;
	}
	.h-35{
		height: 60upx;
	}
	.cro_left{
		width: 10upx;
		background-color: #FFFFFF;
		border-radius: 20upx 0 20upx 0 ;
		z-index: 111;
	}
	.cro_right{
		width: 10upx;
		background-color: #FFFFFF;
		border-radius: 0 20upx 0upx 20upx;
		z-index: 111;
	}
	.ellipsis_pro{
		width: 120upx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		-webkit-line-clamp: 1;  /* 控制行数 */
		line-clamp: 1;	/* 控制行数 */
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		word-wrap: break-word;
		white-space: normal;
		word-break: break-all;
	}
</style>
